<template>
  <view class="comment-bg" v-if="props.modelValue" @click="closeBox">
    <view class="comment-box" :style="{marginBottom: keyboardHeight + 'px'}" @click.stop>
      <view class="comment-input">
        <input v-model="data.comment" focus class="uni-input" placeholder-style="color:#aaaaaa" placeholder="爱评论的人运气都不会差" :adjust-position="false" @keyboardheightchange="keyboardHeightChange"/>
      </view>
      <view class="comment-btn" @click="submitData"></view>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive, watch, getCurrentInstance } from 'vue'
const { $https } = getCurrentInstance().appContext.config.globalProperties
const props = defineProps({
  info: {
    type: Object,
    default: () => ({})
  },
  modelValue: {
    type: Boolean,
    default: false
  }
})
const data = reactive({
  comment: '', // 评论内容
  placeholder: ''
})
const emit = defineEmits(['update:modelValue', 'complate'])

watch(() => props.modelValue, () => {
  if (props?.info?.userName && props?.info?.userId) {
    data.comment = ''
    data.placeholder = `回复 @${props.info.userName}`
  } else {
    data.comment = ''
    data.placeholder = '喜欢就给个评论支持一下'
  }
})
const keyboardHeight = ref(0)
const keyboardHeightChange = (e) => {
  keyboardHeight.value = e.detail?.height || 0 // {height: height, duration: duration}
}
const closeBox = () => {
  emit('update:modelValue', false)
}
const submitData = () => {
  if (!data.comment) {
    uni.showToast({
      title: '请输入评论',
      icon: 'none'
    })
    return
  }
  const req = {
    customerVideoId: props.info.contentId, // 作品id
    parentId: props.info.parentId || 0, // 父级id（没有父级为0)
    beReviewerId: props.info.userId, // 被评论人id（一级评论可以不填）
    commentLevel: props.info.commentLevel,
    comment: data.comment // 评论内容
  }
  emit('update:modelValue', false)
  $https({
    url: '/video-comment/add',
    type: '',
    method: 'post',
    data: req
  }).then(res => {
    emit('complate')
    uni.showToast({
      title: '评论已发送',
      icon: 'none'
    })
  })
}

</script>

<style scoped lang="scss">
.comment-bg{
  position: fixed;
  width: 100vw;
  height: 100rpx;
  left: 0;
  bottom: 0;
  background-color: #fff;
  z-index: 9999;
}
.comment-box{
  $input-size: 68rpx;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16rpx 24rpx 0 24rpx;
  margin-bottom: 0;
  transition: 0.1s;
  box-shadow: 0px 0px 6px 1px #EAEAEA;
  .comment-input{
    width: calc(100% - 80rpx);
    .uni-input{
      background-color: #F0F0F0;
      border-radius: 8rpx;
      height: $input-size;
      line-height: $input-size;
      padding: 0 16rpx;
      margin-bottom: 16rpx;
      font-size: 24rpx;
    }
  }
  .comment-btn{
    width: 60rpx;
    height: 60rpx;
    background: url(https://img.qumoyugo.com/webimgbg/home_message_send_btn.png) no-repeat;
    background-size: 100%;
  }
}
</style>
